import React, { Component } from 'react'
import './todo.scss'
import TodoInput from './TodoInput'
import TodoList from './TodoList'

export default class Todo extends Component {
  state = {
    todoList: []
  }
  addTodo = (todo) => {
    const todoList = [
      ...this.state.todoList,
      {
        id: Math.random(),
        body: todo,
        state: false
      }
    ]
    this.setState({
      todoList
    })
  }
  changeState = (id) => {
    let todoList = [...this.state.todoList]
    todoList.forEach(item => {
      if(item.id === id) {
        item.state = !item.state
      }
    })
    this.setState({
      todoList
    })
  }
  render() {
    const {todoList} = this.state
    return (
      <div className='todo'>
        <TodoInput addTodo={this.addTodo} />
        <TodoList todoList={todoList} changeState={this.changeState} />
      </div>
    )
  }
}
